<template>
  <article class="menu-page">
    <n-space vertical size="large">
      <n-layout has-sider>
        <n-layout-sider
          collapse-mode="width"
          :collapsed-width="120"
          :width="240"
          show-trigger="arrow-circle"
          content-style="padding: 24px;"
          bordered
        >
          <slot name="title">
            <slash-panel-header v-if="isShowTitle" :title="title" />
          </slot>
          <n-menu
            v-model:value="activeKey"
            :collapsed="collapsed"
            :collapsed-width="64"
            :collapsed-icon-size="22"
            :options="menuOptions"
          />
        </n-layout-sider>
        <n-layout-content content-style="padding: 24px;">
          <component v-if="options[activeKey]" :is="options[activeKey]"></component>
        </n-layout-content>
      </n-layout>
    </n-space>
  </article>
</template>
<script lang="ts" setup>
  import { MenuOption } from 'naive-ui';
  import { PropType } from 'vue';
  import { MenuPageProps } from './type';
  import { computed } from '@vue/reactivity';
  import { ref } from 'vue';
  import  SlashPanelHeader from '@/components/Panel/SlashPanelHeader.vue';
  import { watch } from 'vue';
  const props = defineProps({
    options: {
      type: Object as PropType<MenuPageProps['options']>,
      default: () => ({}),
    },
    title: {
      type: String,
      default: '标题',
    },
    isShowTitle: {
      type: Boolean,
      default: true,
    },
  });
  const collapsed = ref(false);
  const activeKey = ref('');
  watch(
    () => props.options,
    () => {
      console.log(props.options);
      activeKey.value = Object.keys(props.options)[0] || '';
    },
    {
      immediate: true,
    }
  );
  const menuOptions = computed<MenuOption[]>(() => {
    const result:any[] = [];
    for (const key in props.options) {
      result.push({
        label: key,
        key: key,
      });
    }
    return result;
  });
</script>
<style lang="less" scoped>
  .menu-page {
    height: 100%;
  }
  .n-layout {
    height: 85vh;
  }
</style>
